<template lang="">
  <div class="content">
    <div class="main">
      <div class="top" style="border: 0px solid #000;text-align: left;">
        <el-select v-model="industry" placeholder="请选择行业" v-on:change="getProcessList()">
          <el-option v-for="dictRow in industryList" :label="dictRow.dictValue" :value="dictRow.dictKey">
          </el-option>
        </el-select>
      </div>
      <div class="itxst"
        style="float: left;display: flex;flex-direction: row;flex-wrap: nowrap;border: 0px solid #000;height: auto;">
        <!-- 销售过程板块 -->
        <draggable v-model="processList" group="site" :scroll="true" animation="300" dragClass="dragClass"
          ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEndProcess"
          style="display: flex;border: 0px solid #000;" @click="">
          <div class="col" v-for="(item,index) in processList" :key="item.salesProcessId"
            style="float: left;display: flex;flex-direction: row;flex-wrap: nowrap;padding-top: 20px;font-size: 16px;border: 0px solid #000;">
            <div class="box1" style="width:280px;height:auto;margin-bottom:50px;border: 0px solid #000;">
              <div class="top">
                <div class="more" style="height: 20px;border: 0px solid #000;float: right;padding-right: 20px;">
                  <!-- 添加销售机会 -->
                  <span style="margin-right: 10px;cursor: pointer;"
                    @click="dialogVisible1=true;salesProcessId=item.salesProcessId"> <i class="el-icon-plus"></i></span>
                  <!-- 添加销售机会弹框 -->
                  <el-dialog title="销售机会添加" :visible.sync="dialogVisible1">
                    <el-form>
                      <el-form-item label="商 机">
                        <el-input v-model="businessName" placeholder="请输入内容"
                          style="border: 1px solid #b6b6b6;width: 260px;border-radius: 5px;margin-left: 26px;">
                        </el-input>
                      </el-form-item>
                      <el-form-item label="项目来源">
                        <el-input v-model="salesSource" placeholder="请输入内容"
                        style="border: 1px solid #b6b6b6;width: 260px;border-radius: 5px;overflow: hidden;">
                      </el-input>
                      </el-form-item>
                      <el-form-item label="客 户">
                        <el-select v-model="customId" placeholder="请选择客户" @click="getUserList" clearable filterable
                          style="border: 1px solid #b6b6b6;width: 260px;border-radius: 5px;overflow: hidden;margin-left: 26px;">
                          <el-option v-for="(item,index)  in userList" :key="index" :label="item.username"
                            :value="item.userId">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="销售人员">
                        <el-select v-model="salesmanId" placeholder="请选择销售人员" @click="getUserList" clearable
                          style="border: 1px solid #b6b6b6;width: 260px;border-radius: 5px;overflow: hidden;">
                          <el-option v-for="(item,index)  in userList1" :key="index" :label="item.realname"
                            :value="item.userId">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="预期收益">
                        <el-input v-model="expecteEarn"
                          style="border: 1px solid #b6b6b6;width: 260px;border-radius: 5px;">
                        </el-input>
                      </el-form-item>
                      <el-rate style="margin-top: 10px;" v-model="salesPriority"></el-rate>
                    </el-form>
                    <div slot="footer" class="dialog-footer"
                      style="text-align: center;margin-top: 20px; cursor: pointer; ">
                      <el-button @click="dialogVisible1 = false">取 消</el-button>
                      <el-button type="primary" @click="addChange">添 加</el-button>
                    </div>
                  </el-dialog>

                  <!-- 修改销售过程 -->
                  <span @click="dialogVisible3=true;updateProcess(item.salesProcessId)"
                    style="margin-right: 10px;cursor: pointer;"> <i class="el-icon-edit"></i></span>
                  <!-- 修改销售过程弹框 -->
                  <el-dialog title="销售过程修改" :visible.sync="dialogVisible3">
                    <el-form>
                      <el-form-item label="专题标题">
                        <el-input v-model="processName" placeholder="请输入内容"
                          style="border: 1px solid #b6b6b6;width: 260px;border-radius: 5px;margin-left: 26px;">
                        </el-input>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer"
                      style="text-align: center;margin-top: 20px; cursor: pointer; ">
                      <el-button @click="dialogVisible3 = false">取 消</el-button>
                      <el-button type="primary" @click="updateSell(updateProcessId,processName)">确 定</el-button>
                    </div>
                  </el-dialog>

                  <!-- 删除销售过程 -->
                  <span style="cursor: pointer;" @click="dialogVisible = true">
                    <!-- 删除销售过程弹框 -->
                    <el-popconfirm @confirm="delSell(item.salesProcessId)" confirm-button-text='好的'
                      cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="确定删除该销售过程吗？">
                      <i class="el-icon-delete" slot="reference"></i>
                    </el-popconfirm>
                  </span>
                </div>
                <div class="name" style="border: 0px solid #000;float: left;width: 100%;padding-left: 20px;">
                  <img src="../../../../assets/images/crm_81.png" alt="">
                  <span style="position: relative;top: -5px;">{{item.processName}}</span>
                  <span
                    style="position: relative;top: 5px;color:#fe0100;float: right;padding-right:40px;">{{(parseFloat(item.totalAmount)).toLocaleString('zh-CN',
                    { style: 'currency', currency:
                    'cny', currencyDisplay: 'symbol' })}}</span>
                </div>
              </div>
              <!-- <div class="div" style="margin-top:0px;color: #0005cf;border: 0px solid #000;">
                <el-divider></el-divider>
              </div> -->

              <!-- 销售机会列表 -->
              <div class="list"
                style="margin-left:-10px;margin-top:0px;border: 0px solid #000;width: 300px;margin-right: 50px;">
                <draggable v-model="salesListData[index]" group="site1" :scroll="true" animation="300"
                  style="width: 100%; min-height: 100%" dragClass="dragClass" ghostClass="ghostClass"
                  chosenClass="chosenClass" @start="onStart($event,index)"
                  @add="onEnd($event,index,item.salesProcessId)">
                  <div class="item" v-for="item1 in salesListData[index]" :key="item1.salesId">
                    <div class="bname"> {{item1.businessName}}
                    </div><span style="font-size: 14px;
                    color: green;">({{item1.followTotal}}跟进)</span>
                    <!-- 删除、修改销售机会 -->
                    <div class="bj" style="border:0px solid #000;float:right;">
                      <el-popconfirm @confirm="delChange(item1.salesId)" confirm-button-text='删除'
                        @cancel="updataChange(item1.salesId)" cancel-button-text='' icon="none">
                        <span class="cz" slot="reference">...</span>
                      </el-popconfirm>
                    </div><br>
                    <div class="main" style="text-align: left;font-size: 16px;">
                      <ul style="list-style: none;border: 0px solid #000;padding: 0;margin-top: 5px;line-height: 25px;"
                        @click="Details(item1)">
                        <li style="padding-right: 10px;"><i class="el-icon-office-building"
                            style="font-weight:600;color:#161616;">&nbsp;</i>{{item1.username}}</li>
                        <li><i class="el-icon-collection-tag" style="font-weight:600;color:#161616">&nbsp;</i>预期金额<span
                            style="color:#fe0100;margin: -5px;">
                             {{(parseFloat(item1.expecteEarn)).toLocaleString('zh-CN', { style: 'currency', currency:
                            'cny', currencyDisplay: 'symbol' })}}</span>
                        </li>
                        <li>
                          <el-rate disabled :value="Number(item1.salesPriority)"></el-rate>
                        </li>
                      </ul>
                    </div>
                  </div>
                </draggable>
              </div>
            </div>
          </div>
        </draggable>
        <!-- 添加销售过程 -->
        <div class="col">
          <div class="title">专题标题 </div>
          <!-- <el-select v-model="industry" placeholder="请选择行业" clearable
            style="width: 275px;border: 1px solid #ccc;text-align: left;border-radius: 10px;overflow: hidden;">
            <el-option v-for="dictRow1 in industryList" :label="dictRow1.dictValue" :value="dictRow1.dictKey">
            </el-option>
          </el-select> -->
          <el-input v-model="processName" placeholder="请输入内容"
            style="width: 275px;border: 1px solid #ccc;text-align: left;border-radius: 10px;overflow: hidden;">
          </el-input>
          <p>
            <el-button style="border-radius: 50px;" @click="addDefine" type="danger" class="button">添加</el-button>
            <el-button style="border-radius: 50px;" type="danger" class="button">取消</el-button>
          </p>
        </div>
        <!-- </draggable> -->
      </div>
    </div>
  </div>
</template>

<script>
  //导入draggable组件
  import draggable from 'vuedraggable'

  export default {
    //注册draggable组件

    name: 'change',
    components: {
      draggable,
    },
    inject: ['reload'],
    data() {
      return {
        industryList: [],   //行业列表
        // industry: '',
        industry: '1',
        dictKey: '',
        dictVar: '',
        updateProcessId: '',
        salesSource:'',
        oldTableIndex: 0,
        dialogVisible1: false,
        dialogVisible: false,
        dialogVisible2: false,
        dialogVisible3: false,
        current: 0,
        size: 100,
        drag: false,
        // undefined:'',
        processName: '',
        processNum: '1',
        salesProcessId: '',
        newPlace: '',
        businessName: this.businessName,
        customId: this.customId,
        salesmanId: '',
        expecteEarn: this.expecteEarn,
        salesPriority: this.salesPriority,
        changeList: [],   //销售机会列表
        processList: [],   //销售过程列表
        salesListData: [],
        userList: [],   //客户列表
        userList1: [],

        //定义要被拖拽对象的数组
        // arr: [
        //   { id: 1, name: 'www.itxst.com' },
        //   { id: 2, name: 'www.jd.com' },

        //   { id: 3, name: 'www.baidu.com' },
        //   { id: 4, name: 'www.baidu.com' },
        //   { id: 5, name: 'www.baidu.com' },
        //   { id: 6, name: 'www.baidu.com' },
        //   { id: 7, name: 'www.taobao.com' }
        // ]
      };
    },
    // 组件挂在完毕发请求
    mounted() {


      this.getUserList()
      this.getIndustryList()

    },
    methods: {
      statusFormat(row, column) {
        switch (column.property) {
          case "status":
            var status = ["未完成", "已完成"]
            var value = status[Number(row[column.property])]
            break;
        }
        return value;
      },
      // format(percentage) {
      //   return percentage === 100 ? '' : ``;
      // },
      
      //行业
      async getIndustryList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'industry'
        }
        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.industryList = result.data.data
        this.getProcessList()

      },
      // 获取销售过程列表
      async getProcessList() {
        // 解构出参数
        const { current, size, industry } = this;
        var data = {
          current: current,
          size: size,
          industry: industry
        }
        var result = await this.$API.change.reqSellList(data)
        // console.log(result)
        this.total = result.data.total;
        this.processList = result.data.data
        var newSalesListData = []
        for (let i in this.processList) {
          var reqSalesData = {
            current: 1,
            size: 100,
            salesProcessId: this.processList[i].salesProcessId
          }
          var salesResult = await this.$API.change.reqChangeList(reqSalesData);
          newSalesListData.push(salesResult.data.data)
          let totalAmount = 0
          for (let j in salesResult.data.data) {
            totalAmount += parseInt(salesResult.data.data[j].expecteEarn)
          }
          this.processList[i].totalAmount = totalAmount
          // console.log("*******************")
          // console.log(this.processList)
          // console.log(this.processList[i])


        }
        // console.log(newSalesListData)
        this.salesListData = newSalesListData

      },
      // 添加过程
      async addDefine() {
        // 解构出参数
        if (this.processName == '') {
          this.$message("无法添加空白过程，请填写过程名称")
        } else {
          const { processName, processNum, industry } = this;
          var data = {
            processName: processName,
            processNum: processNum,
            industry: industry
          }
          let result = await this.$API.change.reqProcessList(data);
          // console.log(result)
          this.reload();
          this.getProcessList()
          this.$message.success("添加成功！");
        }
      },
      updateProcess(updateProcessId) {
        this.updateProcessId = updateProcessId
      },
      // 删除过程
      async delSell(salesProcessId) {
        // 解构出参数
        // const { salesProcessId} = this;
        var data = {
          salesProcessId: salesProcessId,
        }
        let result = await this.$API.change.reqDelSell(data);
        this.$message.success("删除成功！");
        this.reload();
        this.getProcessList()
      },
      // 修改过程
      async updateSell(salesProcessId, processName) {
        // 解构出参数
        // const { salesProcessId} = this;
        var data = {
          salesProcessId: salesProcessId,
          processName: processName
        }
        let result = await this.$API.change.reqUpdateSell(data);
        this.$message.success("修改成功！");
        this.reload();
        this.getProcessList()
      },

      // 添加销售机会
      async addChange() {
        // 解构出参数
        if (this.businessName == '') {
          this.$message("无法添加空白商机")
        } else {
          const { businessName, customId, salesmanId, expecteEarn, salesPriority, salesProcessId,salesSource } = this;
          var data = {
            businessName: businessName,
            customId: customId,
            salesmanId: salesmanId,
            expecteEarn: expecteEarn,
            salesPriority: salesPriority,
            salesProcessId: salesProcessId,
            salesSource:salesSource
            // industry: industry
          }
          // 获取资源列表接口
          let result = await this.$API.change.reqAddChange(data);
          // console.log(result)
          this.reload();
          this.getProcessList()
          this.$message.success("添加成功！");
        }
      },
      // 删除销售机会
      async delChange(salesId) {
        // 解构出参数
        // const { salesProcessId} = this;
        var data = {
          salesId: salesId,
        }
        let result = await this.$API.change.reqDelChange(data);
        this.$message.success("删除成功！");
        this.reload();
        this.getProcessList()
      },
      // 移动后修改销售机会
      async moveUpdataChange(salesId, salesProcessId) {
        // 解构出参数
        // const { salesProcessId} = this;
        var data = {
          salesId: salesId,
          salesProcessId: salesProcessId
        }
        let result = await this.$API.change.reqUpdataChange(data);
        this.$message.success("修改成功！");
        this.getProcessList()
      },
      // 取消
      // Canael() {
      //   this.processName = ''
      // },
      // 获取客户列表
      async getUserList() {
        // 解构出参数
        const { current, size, userType } = this;
        var data = {
          current: 1,
          size: 100,
          userType: '23'
        }
        let result = await this.$API.user.reqUserList(data)
        // this.total = result.data.total;
        this.userList = result.data.data
        var data1 = {
          current: 1,
          size: 100,
          userType: '1'
        }
        let result1 = await this.$API.user.reqUserList(data1)
        // this.total = result1.data.total;
        this.userList1 = result1.data.data
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => { });
      },

      //拖拽结束事件
      async onEndProcess(e) {
        this.salesListData = []
        var data = {
          salesProcessId: this.processList[e.newIndex].salesProcessId,
          industry: this.processList[e.newIndex].industry,
          newPlace: e.newIndex,
        }
        // 获取资源列表接口
        let result = await this.$API.change.reqMoveSell(data);
        this.getProcessList()
      },
      //开始拖拽事件
      async onStart(e, s) {
        this.oldTableIndex = s;
        // console.log(e);
        this.drag = true;
      },
      async onEnd(e, s, salesProcessId) {

        this.moveUpdataChange(this.salesListData[s][e.newIndex].salesId, salesProcessId)
        this.drag = false;

      },
      Details(vl) {
        const tolink = this.$router.push({
          path: '/details',
          query: { salesId: vl.salesId }
        });
        window.open(tolink.href, '_self')
      },
    }
  }

</script>
<style scoped>
  /* @import "../../style/style.css"; */
  @import "../../../../style/style.css";

  /*定义要拖拽元素的样式*/
  .ghostClass {
    /* background-color: blue !important; */
  }

  .chosenClass {
    /* background-color: #fff !important; */
    opacity: 1 !important;
  }

  .dragClass {
    background-color: #eee !important;
    opacity: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
  }

  .itxst {
    /* margin: 10px; */
    height: 700px;
    /* min-height: 100%; */
    /* display: flex;
    flex-direction: row;
    flex-wrap: nowrap; */

  }

  .title {
    font-size: 18px;
    padding: 30px 0 15px 0;

  }

  .box1 .top {
    padding-top: 10px;
    /* margin: 0 10px; */
    border: solid 1px #fe00000b;
    background-color: #fe00000b;
    /* background-color: #fe00000b; */
    /* background-color: #fff; */
    height: auto;
    border-radius: 10px;
    /* overflow: hidden; */
    border: 1px solid #eee;
    width: 100%;
    height: 70px;
    margin-bottom: 20px;
    /* box-shadow: 1px 1px 6px 3px #fe00001b; */
  }

 

  .col {
    width: 300px;
    /* flex: 1; */
    /* padding: 10px; */
    border: solid 0px #000;
    border-radius: 10px;
    float: left;
    /* background-color: #fff; */
    text-align: left;
    /* padding-left: 20px; */
    margin-left: 10px;

    /* flex: 0 0 auto; */
  }

  .col+.col {
    margin-left: 10px;
  }

  .item {
    padding: 15px 0px 15px 25px;
    margin: 0 10px;
    border: solid 1px #c9c6c6;
    background-color: #fff;
    height: auto;
    border-radius: 10px;
    /* overflow: hidden; */
    border: 1px solid #eee;
    /* margin-top: 70px; */

  }


  .item1 {
    /* padding: 6px 12px;
    margin: 0px 10px 0px 10px; */
    border: solid 1px #eee;
    background-color: #fff;
    width: 300px;

  }

  .item:hover {
    background-color: #fe00000b;
    cursor: move;
    border: 1px solid #fe00000b;
    cursor: pointer;
    box-shadow: 1px 1px 6px 3px #fe00001b;

  }

  .item+.item {
    /* border-top: none; */
    margin-top: 16px;
  }

  .bname {
    border: 0px solid #000;
    float: left;
    font-weight: 600;
    background-image: -webkit-linear-gradient(45deg, #fe0100, #fe5900ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue6sinfinitelinear;
    margin-right: 20px;
  }



  .more>>>.el-form-item__label {
    font-size: 16px;
  }

  .more>>>.el-select .el-input {
    width: auto;
  }

  /* .pro>>>.el-progress-bar {
    width: 117%;
  } */

  .el-popover {
    min-width: 0 !important;
    font-size: 16px;
  }

  .bj .cz {
    opacity: 0;
    cursor: pointer;
    color: #0060ff;
    font-weight: 3000;
    border: 0px solid #000;
    writing-mode: tb-rl;
    font-size: 30px;
  }

  .item:hover .cz {
    opacity: 1;
    cursor: pointer;
    color: #0060ff;
    font-weight: 3000;
    border: 0px solid #000;
    writing-mode: tb-rl;
    font-size: 30px;
  }

  .more>>>.el-dialog {
    width: 400px;
    text-align: left;
  }

  .main>>>.el-tabs__content {
    overflow: visible !important;
    position: relative !important;
  }
</style>